<template>
  <el-aside class="aside-scheduled">
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        background-color="none"
        active-text-color="rgb(232.8, 233.4, 234.6)"
    >
      <el-menu-item
          :class="{ 'active': activeIndex === index }"
          v-for="(item, index) in scheduledTasksMenu"
          :key="index"
          @click="handleClick(item.to, index)">
        <el-icon>
          <icon-menu/>
        </el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </el-menu>
  </el-aside>

  <el-main class="main-scheduled">
    <router-view></router-view>
  </el-main>
  <el-footer></el-footer>

</template>
<script setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {Menu as IconMenu} from '@element-plus/icons-vue'
import Cookies from 'js-cookie'

const activeIndex = ref('0')
const router = useRouter()

const scheduledTasksMenu = ref([
  {
    title: '运行报表',
    to: '/operation-report',
  },
  {
    title: '任务管理',
    to: '/task-management',
  },
  {
    title: '调度日志',
    to: '/task-log/-1', // 结尾的-1保证路由匹配成功

  },
  {
    title: '执行器管理',
    to: '/actuator-management',
  },
  {
    title: '用户管理',
    to: '/user-management',
  },
])

const handleClick = (to, index) => {
  if (to) {
    router.push(to)
  }
  activeIndex.value = index
}

onMounted(()=>{
  const identity =Cookies.get('XXL_JOB_LOGIN_IDENTITY')
  if (!identity) {
    alert("用户未登录")
    router.push('/login')
  }
})
</script>

<style lang="scss">

.aside-scheduled {
  height: 100%;
  width: 200px;
  background-color: rgba(255, 255, 255, 0.2);
  margin-left: 20px;
  padding: 20px;
}

.el-menu-vertical-demo {
  height: 100%;
}

.el-aside {
  padding: 0;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

</style>

